<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2782960" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon my-icon">&#xe6c6;</span>
                <div class="name">refuse</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6c7;</span>
                <div class="name">selection</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6c9;</span>
                <div class="name">Privacy</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ca;</span>
                <div class="name">increase</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6cb;</span>
                <div class="name">music</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6cc;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ce;</span>
                <div class="name">prompt</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6cf;</span>
                <div class="name">Incoming_call</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d0;</span>
                <div class="name">layered</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d1;</span>
                <div class="name">collection</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d2;</span>
                <div class="name">soundsize</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d3;</span>
                <div class="name">upward</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d4;</span>
                <div class="name">vision</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d5;</span>
                <div class="name">top</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d6;</span>
                <div class="name">history</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d7;</span>
                <div class="name">shopping</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d8;</span>
                <div class="name">turnvoice</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6d9;</span>
                <div class="name">locking</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6da;</span>
                <div class="name">restore</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6dd;</span>
                <div class="name">night</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6de;</span>
                <div class="name">safety</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6e0;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6e3;</span>
                <div class="name">relationship</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6e6;</span>
                <div class="name">video1</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6e7;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6e8;</span>
                <div class="name">visible</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ea;</span>
                <div class="name">telephone</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ec;</span>
                <div class="name">th_internet</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ed;</span>
                <div class="name">callout</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ef;</span>
                <div class="name">withdraw</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6f1;</span>
                <div class="name">call</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6f2;</span>
                <div class="name">video2</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6f3;</span>
                <div class="name">hangup</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6f4;</span>
                <div class="name">mute</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6f5;</span>
                <div class="name">eye_protection</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6f6;</span>
                <div class="name">distance</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6f8;</span>
                <div class="name">nickname</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6f9;</span>
                <div class="name">payment</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6fa;</span>
                <div class="name">privacy_closed</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6fb;</span>
                <div class="name">movie</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6fc;</span>
                <div class="name">wifi</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6fe;</span>
                <div class="name">problem</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ff;</span>
                <div class="name">address</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe700;</span>
                <div class="name">check more</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe701;</span>
                <div class="name">book resource</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe703;</span>
                <div class="name">check more</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe704;</span>
                <div class="name">address list</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe705;</span>
                <div class="name">address</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe706;</span>
                <div class="name">cancel white</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe707;</span>
                <div class="name">cancel</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe709;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe70a;</span>
                <div class="name">genie calling</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe70b;</span>
                <div class="name">entertainment mark</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe70c;</span>
                <div class="name">add meteo</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe70d;</span>
                <div class="name">evitare traffic</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe70e;</span>
                <div class="name">evitare payment</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe70f;</span>
                <div class="name">genie clock</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe710;</span>
                <div class="name">highway first</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe711;</span>
                <div class="name">faimly album</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe712;</span>
                <div class="name">genie SEC</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe713;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe714;</span>
                <div class="name">genie community</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe715;</span>
                <div class="name">house care</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe716;</span>
                <div class="name">marks</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe717;</span>
                <div class="name">info personal</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe718;</span>
                <div class="name">calling robort</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe719;</span>
                <div class="name">master ctrl</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe71a;</span>
                <div class="name">message white</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe71c;</span>
                <div class="name">light ctrl</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe71d;</span>
                <div class="name">mirror light ctrl</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe71e;</span>
                <div class="name">kids lock</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe71f;</span>
                <div class="name">evitare highway</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe720;</span>
                <div class="name">group ctrl</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe721;</span>
                <div class="name">mute mode</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe723;</span>
                <div class="name">huoyan</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe724;</span>
                <div class="name">payment life</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe725;</span>
                <div class="name">step back</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe726;</span>
                <div class="name">skin test</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe727;</span>
                <div class="name">scan QR</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe728;</span>
                <div class="name">instruction</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe72a;</span>
                <div class="name">mask clock</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe72b;</span>
                <div class="name">MTR</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe72c;</span>
                <div class="name">suggestion</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe72d;</span>
                <div class="name">queen mirror</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe72e;</span>
                <div class="name">phone bill</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe72f;</span>
                <div class="name">voice memo</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe730;</span>
                <div class="name">scan read</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe731;</span>
                <div class="name">schedule</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe732;</span>
                <div class="name">tips money</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe733;</span>
                <div class="name">voice shopping</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe734;</span>
                <div class="name">to go</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe735;</span>
                <div class="name">voiceprint</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe736;</span>
                <div class="name">xiami music</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe737;</span>
                <div class="name">sleep mode</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe738;</span>
                <div class="name">Q&A</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe739;</span>
                <div class="name">volume</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe73a;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe73b;</span>
                <div class="name">check surface</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe73c;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe73d;</span>
                <div class="name">birthday</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe73e;</span>
                <div class="name">device off</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe73f;</span>
                <div class="name">custom</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe740;</span>
                <div class="name">diffuser stop area</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe741;</span>
                <div class="name">diffuser stop</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe742;</span>
                <div class="name">diffuser play</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe743;</span>
                <div class="name">connect device</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe744;</span>
                <div class="name">cook</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe745;</span>
                <div class="name">diffuser play area</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe746;</span>
                <div class="name">device on</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe747;</span>
                <div class="name">dinner</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe748;</span>
                <div class="name">done work</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe74a;</span>
                <div class="name">get up</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe74b;</span>
                <div class="name">disconnect device</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe74c;</span>
                <div class="name">get out</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe74d;</span>
                <div class="name">guests</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe74e;</span>
                <div class="name">feeding</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe750;</span>
                <div class="name">mark</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe751;</span>
                <div class="name">good night</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe752;</span>
                <div class="name">meeting</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe753;</span>
                <div class="name">house cleaning</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe754;</span>
                <div class="name">go home</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe755;</span>
                <div class="name">hot</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe756;</span>
                <div class="name">radio button unselect</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe757;</span>
                <div class="name">menu</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe758;</span>
                <div class="name">radio button select</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe759;</span>
                <div class="name">record</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe75a;</span>
                <div class="name">meeting over</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe75b;</span>
                <div class="name">microphone off</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe75c;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe75e;</span>
                <div class="name">series finale</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe75f;</span>
                <div class="name">put baby to bed</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe760;</span>
                <div class="name">washing room</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe761;</span>
                <div class="name">wake up baby</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe762;</span>
                <div class="name">watch series</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe763;</span>
                <div class="name">take a break</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe697;</span>
                <div class="name">bluetooth off</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe698;</span>
                <div class="name">bluetoothon</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe699;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe69a;</span>
                <div class="name">course</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe69b;</span>
                <div class="name">bluetooth_link</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a6;</span>
                <div class="name">addto</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a7;</span>
                <div class="name">child</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a8;</span>
                <div class="name">audio</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a9;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6aa;</span>
                <div class="name">DND_mode</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ab;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ac;</span>
                <div class="name">child2</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ad;</span>
                <div class="name">settings</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ae;</span>
                <div class="name">bluray</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6af;</span>
                <div class="name">cancel</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6b0;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6b1;</span>
                <div class="name">brightness</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6b3;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6b4;</span>
                <div class="name">favoriteslist</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6b7;</span>
                <div class="name">bottom</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6b8;</span>
                <div class="name">guarantee</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6b9;</span>
                <div class="name">agreement</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ba;</span>
                <div class="name">prevent</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6bb;</span>
                <div class="name">privacy2</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6bd;</span>
                <div class="name">brightness2</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6be;</span>
                <div class="name">privac_open</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6bf;</span>
                <div class="name">conversation</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6c0;</span>
                <div class="name">information</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6c1;</span>
                <div class="name">answer</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6c2;</span>
                <div class="name">face</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6c3;</span>
                <div class="name">protect</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6c4;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6c5;</span>
                <div class="name">nosignal</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a1;</span>
                <div class="name">singlecycle</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a5;</span>
                <div class="name">random</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6ee;</span>
                <div class="name">singing</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe671;</span>
                <div class="name">词表权益</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe69c;</span>
                <div class="name">musiclist</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a3;</span>
                <div class="name">timeout</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6df;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6e2;</span>
                <div class="name">respond</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe69d;</span>
                <div class="name">loop</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe69e;</span>
                <div class="name">nextsong</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe69f;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a0;</span>
                <div class="name">previous</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a2;</span>
                <div class="name">next</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6a4;</span>
                <div class="name">voice</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6db;</span>
                <div class="name">back</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6dc;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6e1;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6e9;</span>
                <div class="name">dislike</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6eb;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon my-icon">&#xe6f0;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'my-icon';
  src: url('iconfont.woff2?t=1644985602903') format('woff2'),
       url('iconfont.woff?t=1644985602903') format('woff'),
       url('iconfont.ttf?t=1644985602903') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.my-icon {
  font-family: "my-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="my-icon"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"my-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon my-icon my-icon-refuse"></span>
            <div class="name">
              refuse
            </div>
            <div class="code-name">.my-icon-refuse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-selection"></span>
            <div class="name">
              selection
            </div>
            <div class="code-name">.my-icon-selection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-Privacy"></span>
            <div class="name">
              Privacy
            </div>
            <div class="code-name">.my-icon-Privacy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-increase"></span>
            <div class="name">
              increase
            </div>
            <div class="code-name">.my-icon-increase
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-music"></span>
            <div class="name">
              music
            </div>
            <div class="code-name">.my-icon-music
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.my-icon-save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-prompt"></span>
            <div class="name">
              prompt
            </div>
            <div class="code-name">.my-icon-prompt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-Incoming_call"></span>
            <div class="name">
              Incoming_call
            </div>
            <div class="code-name">.my-icon-Incoming_call
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-layered"></span>
            <div class="name">
              layered
            </div>
            <div class="code-name">.my-icon-layered
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-collection"></span>
            <div class="name">
              collection
            </div>
            <div class="code-name">.my-icon-collection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-soundsize"></span>
            <div class="name">
              soundsize
            </div>
            <div class="code-name">.my-icon-soundsize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-upward"></span>
            <div class="name">
              upward
            </div>
            <div class="code-name">.my-icon-upward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-vision"></span>
            <div class="name">
              vision
            </div>
            <div class="code-name">.my-icon-vision
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-top"></span>
            <div class="name">
              top
            </div>
            <div class="code-name">.my-icon-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-history"></span>
            <div class="name">
              history
            </div>
            <div class="code-name">.my-icon-history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-shopping"></span>
            <div class="name">
              shopping
            </div>
            <div class="code-name">.my-icon-shopping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-turnvoice"></span>
            <div class="name">
              turnvoice
            </div>
            <div class="code-name">.my-icon-turnvoice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-locking"></span>
            <div class="name">
              locking
            </div>
            <div class="code-name">.my-icon-locking
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-restore"></span>
            <div class="name">
              restore
            </div>
            <div class="code-name">.my-icon-restore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-night"></span>
            <div class="name">
              night
            </div>
            <div class="code-name">.my-icon-night
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-safety"></span>
            <div class="name">
              safety
            </div>
            <div class="code-name">.my-icon-safety
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.my-icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-relationship"></span>
            <div class="name">
              relationship
            </div>
            <div class="code-name">.my-icon-relationship
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-video"></span>
            <div class="name">
              video1
            </div>
            <div class="code-name">.my-icon-video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.my-icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-visible"></span>
            <div class="name">
              visible
            </div>
            <div class="code-name">.my-icon-visible
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-telephone"></span>
            <div class="name">
              telephone
            </div>
            <div class="code-name">.my-icon-telephone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-th_internet"></span>
            <div class="name">
              th_internet
            </div>
            <div class="code-name">.my-icon-th_internet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-callout"></span>
            <div class="name">
              callout
            </div>
            <div class="code-name">.my-icon-callout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-withdraw"></span>
            <div class="name">
              withdraw
            </div>
            <div class="code-name">.my-icon-withdraw
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-call"></span>
            <div class="name">
              call
            </div>
            <div class="code-name">.my-icon-call
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-video1"></span>
            <div class="name">
              video2
            </div>
            <div class="code-name">.my-icon-video1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-hangup"></span>
            <div class="name">
              hangup
            </div>
            <div class="code-name">.my-icon-hangup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-mute"></span>
            <div class="name">
              mute
            </div>
            <div class="code-name">.my-icon-mute
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-eye_protection"></span>
            <div class="name">
              eye_protection
            </div>
            <div class="code-name">.my-icon-eye_protection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-distance"></span>
            <div class="name">
              distance
            </div>
            <div class="code-name">.my-icon-distance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-nickname"></span>
            <div class="name">
              nickname
            </div>
            <div class="code-name">.my-icon-nickname
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-payment"></span>
            <div class="name">
              payment
            </div>
            <div class="code-name">.my-icon-payment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-privacy_closed"></span>
            <div class="name">
              privacy_closed
            </div>
            <div class="code-name">.my-icon-privacy_closed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-movie"></span>
            <div class="name">
              movie
            </div>
            <div class="code-name">.my-icon-movie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-wifi"></span>
            <div class="name">
              wifi
            </div>
            <div class="code-name">.my-icon-wifi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-problem"></span>
            <div class="name">
              problem
            </div>
            <div class="code-name">.my-icon-problem
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-address"></span>
            <div class="name">
              address
            </div>
            <div class="code-name">.my-icon-address
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-checkmore"></span>
            <div class="name">
              check more
            </div>
            <div class="code-name">.my-icon-checkmore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-bookresource"></span>
            <div class="name">
              book resource
            </div>
            <div class="code-name">.my-icon-bookresource
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-checkmore1"></span>
            <div class="name">
              check more
            </div>
            <div class="code-name">.my-icon-checkmore1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-addresslist"></span>
            <div class="name">
              address list
            </div>
            <div class="code-name">.my-icon-addresslist
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-address1"></span>
            <div class="name">
              address
            </div>
            <div class="code-name">.my-icon-address1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-cancelwhite"></span>
            <div class="name">
              cancel white
            </div>
            <div class="code-name">.my-icon-cancelwhite
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-cancel1"></span>
            <div class="name">
              cancel
            </div>
            <div class="code-name">.my-icon-cancel1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.my-icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-geniecalling"></span>
            <div class="name">
              genie calling
            </div>
            <div class="code-name">.my-icon-geniecalling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-entertainmentmark"></span>
            <div class="name">
              entertainment mark
            </div>
            <div class="code-name">.my-icon-entertainmentmark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-addmeteo"></span>
            <div class="name">
              add meteo
            </div>
            <div class="code-name">.my-icon-addmeteo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-evitaretraffic"></span>
            <div class="name">
              evitare traffic
            </div>
            <div class="code-name">.my-icon-evitaretraffic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-evitarepayment"></span>
            <div class="name">
              evitare payment
            </div>
            <div class="code-name">.my-icon-evitarepayment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-genieclock"></span>
            <div class="name">
              genie clock
            </div>
            <div class="code-name">.my-icon-genieclock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-highwayfirst"></span>
            <div class="name">
              highway first
            </div>
            <div class="code-name">.my-icon-highwayfirst
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-faimlyalbum"></span>
            <div class="name">
              faimly album
            </div>
            <div class="code-name">.my-icon-faimlyalbum
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-genieSEC"></span>
            <div class="name">
              genie SEC
            </div>
            <div class="code-name">.my-icon-genieSEC
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.my-icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-geniecommunity"></span>
            <div class="name">
              genie community
            </div>
            <div class="code-name">.my-icon-geniecommunity
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-housecare"></span>
            <div class="name">
              house care
            </div>
            <div class="code-name">.my-icon-housecare
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-marks"></span>
            <div class="name">
              marks
            </div>
            <div class="code-name">.my-icon-marks
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-infopersonal"></span>
            <div class="name">
              info personal
            </div>
            <div class="code-name">.my-icon-infopersonal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-callingrobort"></span>
            <div class="name">
              calling robort
            </div>
            <div class="code-name">.my-icon-callingrobort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-masterctrl"></span>
            <div class="name">
              master ctrl
            </div>
            <div class="code-name">.my-icon-masterctrl
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-messagewhite"></span>
            <div class="name">
              message white
            </div>
            <div class="code-name">.my-icon-messagewhite
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-lightctrl"></span>
            <div class="name">
              light ctrl
            </div>
            <div class="code-name">.my-icon-lightctrl
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-mirrorlightctrl"></span>
            <div class="name">
              mirror light ctrl
            </div>
            <div class="code-name">.my-icon-mirrorlightctrl
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-kidslock"></span>
            <div class="name">
              kids lock
            </div>
            <div class="code-name">.my-icon-kidslock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-evitarehighway"></span>
            <div class="name">
              evitare highway
            </div>
            <div class="code-name">.my-icon-evitarehighway
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-groupctrl"></span>
            <div class="name">
              group ctrl
            </div>
            <div class="code-name">.my-icon-groupctrl
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-mutemode"></span>
            <div class="name">
              mute mode
            </div>
            <div class="code-name">.my-icon-mutemode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-huoyan"></span>
            <div class="name">
              huoyan
            </div>
            <div class="code-name">.my-icon-huoyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-paymentlife"></span>
            <div class="name">
              payment life
            </div>
            <div class="code-name">.my-icon-paymentlife
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-stepback"></span>
            <div class="name">
              step back
            </div>
            <div class="code-name">.my-icon-stepback
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-skintest"></span>
            <div class="name">
              skin test
            </div>
            <div class="code-name">.my-icon-skintest
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-scanQR"></span>
            <div class="name">
              scan QR
            </div>
            <div class="code-name">.my-icon-scanQR
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-instruction"></span>
            <div class="name">
              instruction
            </div>
            <div class="code-name">.my-icon-instruction
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-maskclock"></span>
            <div class="name">
              mask clock
            </div>
            <div class="code-name">.my-icon-maskclock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-MTR"></span>
            <div class="name">
              MTR
            </div>
            <div class="code-name">.my-icon-MTR
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-suggestion"></span>
            <div class="name">
              suggestion
            </div>
            <div class="code-name">.my-icon-suggestion
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-queenmirror"></span>
            <div class="name">
              queen mirror
            </div>
            <div class="code-name">.my-icon-queenmirror
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-phonebill"></span>
            <div class="name">
              phone bill
            </div>
            <div class="code-name">.my-icon-phonebill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-voicememo"></span>
            <div class="name">
              voice memo
            </div>
            <div class="code-name">.my-icon-voicememo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-scanread"></span>
            <div class="name">
              scan read
            </div>
            <div class="code-name">.my-icon-scanread
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-schedule"></span>
            <div class="name">
              schedule
            </div>
            <div class="code-name">.my-icon-schedule
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-tipsmoney"></span>
            <div class="name">
              tips money
            </div>
            <div class="code-name">.my-icon-tipsmoney
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-voiceshopping"></span>
            <div class="name">
              voice shopping
            </div>
            <div class="code-name">.my-icon-voiceshopping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-togo"></span>
            <div class="name">
              to go
            </div>
            <div class="code-name">.my-icon-togo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-voiceprint"></span>
            <div class="name">
              voiceprint
            </div>
            <div class="code-name">.my-icon-voiceprint
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-xiamimusic"></span>
            <div class="name">
              xiami music
            </div>
            <div class="code-name">.my-icon-xiamimusic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-sleepmode"></span>
            <div class="name">
              sleep mode
            </div>
            <div class="code-name">.my-icon-sleepmode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-QA"></span>
            <div class="name">
              Q&A
            </div>
            <div class="code-name">.my-icon-QA
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-volume"></span>
            <div class="name">
              volume
            </div>
            <div class="code-name">.my-icon-volume
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-cart"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.my-icon-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-checksurface"></span>
            <div class="name">
              check surface
            </div>
            <div class="code-name">.my-icon-checksurface
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.my-icon-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-birthday"></span>
            <div class="name">
              birthday
            </div>
            <div class="code-name">.my-icon-birthday
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-deviceoff"></span>
            <div class="name">
              device off
            </div>
            <div class="code-name">.my-icon-deviceoff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-custom"></span>
            <div class="name">
              custom
            </div>
            <div class="code-name">.my-icon-custom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-diffuserstoparea"></span>
            <div class="name">
              diffuser stop area
            </div>
            <div class="code-name">.my-icon-diffuserstoparea
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-diffuserstop"></span>
            <div class="name">
              diffuser stop
            </div>
            <div class="code-name">.my-icon-diffuserstop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-diffuserplay"></span>
            <div class="name">
              diffuser play
            </div>
            <div class="code-name">.my-icon-diffuserplay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-connectdevice"></span>
            <div class="name">
              connect device
            </div>
            <div class="code-name">.my-icon-connectdevice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-cook"></span>
            <div class="name">
              cook
            </div>
            <div class="code-name">.my-icon-cook
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-diffuserplayarea"></span>
            <div class="name">
              diffuser play area
            </div>
            <div class="code-name">.my-icon-diffuserplayarea
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-deviceon"></span>
            <div class="name">
              device on
            </div>
            <div class="code-name">.my-icon-deviceon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-dinner"></span>
            <div class="name">
              dinner
            </div>
            <div class="code-name">.my-icon-dinner
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-donework"></span>
            <div class="name">
              done work
            </div>
            <div class="code-name">.my-icon-donework
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-getup"></span>
            <div class="name">
              get up
            </div>
            <div class="code-name">.my-icon-getup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-disconnectdevice"></span>
            <div class="name">
              disconnect device
            </div>
            <div class="code-name">.my-icon-disconnectdevice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-getout"></span>
            <div class="name">
              get out
            </div>
            <div class="code-name">.my-icon-getout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-guests"></span>
            <div class="name">
              guests
            </div>
            <div class="code-name">.my-icon-guests
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-feeding"></span>
            <div class="name">
              feeding
            </div>
            <div class="code-name">.my-icon-feeding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-mark"></span>
            <div class="name">
              mark
            </div>
            <div class="code-name">.my-icon-mark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-goodnight"></span>
            <div class="name">
              good night
            </div>
            <div class="code-name">.my-icon-goodnight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-meeting"></span>
            <div class="name">
              meeting
            </div>
            <div class="code-name">.my-icon-meeting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-housecleaning"></span>
            <div class="name">
              house cleaning
            </div>
            <div class="code-name">.my-icon-housecleaning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-gohome"></span>
            <div class="name">
              go home
            </div>
            <div class="code-name">.my-icon-gohome
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-hot"></span>
            <div class="name">
              hot
            </div>
            <div class="code-name">.my-icon-hot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-radiobuttonunselect"></span>
            <div class="name">
              radio button unselect
            </div>
            <div class="code-name">.my-icon-radiobuttonunselect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-menu"></span>
            <div class="name">
              menu
            </div>
            <div class="code-name">.my-icon-menu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-radiobuttonselect"></span>
            <div class="name">
              radio button select
            </div>
            <div class="code-name">.my-icon-radiobuttonselect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-record"></span>
            <div class="name">
              record
            </div>
            <div class="code-name">.my-icon-record
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-meetingover"></span>
            <div class="name">
              meeting over
            </div>
            <div class="code-name">.my-icon-meetingover
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-microphoneoff"></span>
            <div class="name">
              microphone off
            </div>
            <div class="code-name">.my-icon-microphoneoff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.my-icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-seriesfinale"></span>
            <div class="name">
              series finale
            </div>
            <div class="code-name">.my-icon-seriesfinale
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-putbabytobed"></span>
            <div class="name">
              put baby to bed
            </div>
            <div class="code-name">.my-icon-putbabytobed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-washingroom"></span>
            <div class="name">
              washing room
            </div>
            <div class="code-name">.my-icon-washingroom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-wakeupbaby"></span>
            <div class="name">
              wake up baby
            </div>
            <div class="code-name">.my-icon-wakeupbaby
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-watchseries"></span>
            <div class="name">
              watch series
            </div>
            <div class="code-name">.my-icon-watchseries
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-takeabreak"></span>
            <div class="name">
              take a break
            </div>
            <div class="code-name">.my-icon-takeabreak
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-bluetoothoff"></span>
            <div class="name">
              bluetooth off
            </div>
            <div class="code-name">.my-icon-bluetoothoff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-bluetoothon"></span>
            <div class="name">
              bluetoothon
            </div>
            <div class="code-name">.my-icon-bluetoothon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.my-icon-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-course"></span>
            <div class="name">
              course
            </div>
            <div class="code-name">.my-icon-course
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-bluetooth_link"></span>
            <div class="name">
              bluetooth_link
            </div>
            <div class="code-name">.my-icon-bluetooth_link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-addto"></span>
            <div class="name">
              addto
            </div>
            <div class="code-name">.my-icon-addto
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-child"></span>
            <div class="name">
              child
            </div>
            <div class="code-name">.my-icon-child
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-audio"></span>
            <div class="name">
              audio
            </div>
            <div class="code-name">.my-icon-audio
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.my-icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-DND_mode"></span>
            <div class="name">
              DND_mode
            </div>
            <div class="code-name">.my-icon-DND_mode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.my-icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-child1"></span>
            <div class="name">
              child2
            </div>
            <div class="code-name">.my-icon-child1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-settings"></span>
            <div class="name">
              settings
            </div>
            <div class="code-name">.my-icon-settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-bluray"></span>
            <div class="name">
              bluray
            </div>
            <div class="code-name">.my-icon-bluray
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-cancel"></span>
            <div class="name">
              cancel
            </div>
            <div class="code-name">.my-icon-cancel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.my-icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-brightness"></span>
            <div class="name">
              brightness
            </div>
            <div class="code-name">.my-icon-brightness
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.my-icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-favoriteslist"></span>
            <div class="name">
              favoriteslist
            </div>
            <div class="code-name">.my-icon-favoriteslist
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-bottom"></span>
            <div class="name">
              bottom
            </div>
            <div class="code-name">.my-icon-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-guarantee"></span>
            <div class="name">
              guarantee
            </div>
            <div class="code-name">.my-icon-guarantee
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-agreement"></span>
            <div class="name">
              agreement
            </div>
            <div class="code-name">.my-icon-agreement
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-prevent"></span>
            <div class="name">
              prevent
            </div>
            <div class="code-name">.my-icon-prevent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-privacy"></span>
            <div class="name">
              privacy2
            </div>
            <div class="code-name">.my-icon-privacy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-brightness1"></span>
            <div class="name">
              brightness2
            </div>
            <div class="code-name">.my-icon-brightness1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-privac_open"></span>
            <div class="name">
              privac_open
            </div>
            <div class="code-name">.my-icon-privac_open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-conversation"></span>
            <div class="name">
              conversation
            </div>
            <div class="code-name">.my-icon-conversation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-information"></span>
            <div class="name">
              information
            </div>
            <div class="code-name">.my-icon-information
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-answer"></span>
            <div class="name">
              answer
            </div>
            <div class="code-name">.my-icon-answer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-face"></span>
            <div class="name">
              face
            </div>
            <div class="code-name">.my-icon-face
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-protect"></span>
            <div class="name">
              protect
            </div>
            <div class="code-name">.my-icon-protect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-close1"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.my-icon-close1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-nosignal"></span>
            <div class="name">
              nosignal
            </div>
            <div class="code-name">.my-icon-nosignal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-singlecycle"></span>
            <div class="name">
              singlecycle
            </div>
            <div class="code-name">.my-icon-singlecycle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-random"></span>
            <div class="name">
              random
            </div>
            <div class="code-name">.my-icon-random
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-singing"></span>
            <div class="name">
              singing
            </div>
            <div class="code-name">.my-icon-singing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-cibiaoquanyi"></span>
            <div class="name">
              词表权益
            </div>
            <div class="code-name">.my-icon-cibiaoquanyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-musiclist"></span>
            <div class="name">
              musiclist
            </div>
            <div class="code-name">.my-icon-musiclist
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-timeout"></span>
            <div class="name">
              timeout
            </div>
            <div class="code-name">.my-icon-timeout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-message"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.my-icon-message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-respond"></span>
            <div class="name">
              respond
            </div>
            <div class="code-name">.my-icon-respond
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-loop"></span>
            <div class="name">
              loop
            </div>
            <div class="code-name">.my-icon-loop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-nextsong"></span>
            <div class="name">
              nextsong
            </div>
            <div class="code-name">.my-icon-nextsong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.my-icon-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-previous"></span>
            <div class="name">
              previous
            </div>
            <div class="code-name">.my-icon-previous
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-next"></span>
            <div class="name">
              next
            </div>
            <div class="code-name">.my-icon-next
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-voice"></span>
            <div class="name">
              voice
            </div>
            <div class="code-name">.my-icon-voice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-back"></span>
            <div class="name">
              back
            </div>
            <div class="code-name">.my-icon-back
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.my-icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.my-icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-dislike"></span>
            <div class="name">
              dislike
            </div>
            <div class="code-name">.my-icon-dislike
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.my-icon-like
            </div>
          </li>
          
          <li class="dib">
            <span class="icon my-icon my-icon-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.my-icon-setting
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="my-icon my-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            my-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-refuse"></use>
                </svg>
                <div class="name">refuse</div>
                <div class="code-name">#my-icon-refuse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-selection"></use>
                </svg>
                <div class="name">selection</div>
                <div class="code-name">#my-icon-selection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-Privacy"></use>
                </svg>
                <div class="name">Privacy</div>
                <div class="code-name">#my-icon-Privacy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-increase"></use>
                </svg>
                <div class="name">increase</div>
                <div class="code-name">#my-icon-increase</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-music"></use>
                </svg>
                <div class="name">music</div>
                <div class="code-name">#my-icon-music</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-save"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#my-icon-save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-prompt"></use>
                </svg>
                <div class="name">prompt</div>
                <div class="code-name">#my-icon-prompt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-Incoming_call"></use>
                </svg>
                <div class="name">Incoming_call</div>
                <div class="code-name">#my-icon-Incoming_call</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-layered"></use>
                </svg>
                <div class="name">layered</div>
                <div class="code-name">#my-icon-layered</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-collection"></use>
                </svg>
                <div class="name">collection</div>
                <div class="code-name">#my-icon-collection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-soundsize"></use>
                </svg>
                <div class="name">soundsize</div>
                <div class="code-name">#my-icon-soundsize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-upward"></use>
                </svg>
                <div class="name">upward</div>
                <div class="code-name">#my-icon-upward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-vision"></use>
                </svg>
                <div class="name">vision</div>
                <div class="code-name">#my-icon-vision</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-top"></use>
                </svg>
                <div class="name">top</div>
                <div class="code-name">#my-icon-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-history"></use>
                </svg>
                <div class="name">history</div>
                <div class="code-name">#my-icon-history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-shopping"></use>
                </svg>
                <div class="name">shopping</div>
                <div class="code-name">#my-icon-shopping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-turnvoice"></use>
                </svg>
                <div class="name">turnvoice</div>
                <div class="code-name">#my-icon-turnvoice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-locking"></use>
                </svg>
                <div class="name">locking</div>
                <div class="code-name">#my-icon-locking</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-restore"></use>
                </svg>
                <div class="name">restore</div>
                <div class="code-name">#my-icon-restore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-night"></use>
                </svg>
                <div class="name">night</div>
                <div class="code-name">#my-icon-night</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-safety"></use>
                </svg>
                <div class="name">safety</div>
                <div class="code-name">#my-icon-safety</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#my-icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-relationship"></use>
                </svg>
                <div class="name">relationship</div>
                <div class="code-name">#my-icon-relationship</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-video"></use>
                </svg>
                <div class="name">video1</div>
                <div class="code-name">#my-icon-video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-refresh"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#my-icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-visible"></use>
                </svg>
                <div class="name">visible</div>
                <div class="code-name">#my-icon-visible</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-telephone"></use>
                </svg>
                <div class="name">telephone</div>
                <div class="code-name">#my-icon-telephone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-th_internet"></use>
                </svg>
                <div class="name">th_internet</div>
                <div class="code-name">#my-icon-th_internet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-callout"></use>
                </svg>
                <div class="name">callout</div>
                <div class="code-name">#my-icon-callout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-withdraw"></use>
                </svg>
                <div class="name">withdraw</div>
                <div class="code-name">#my-icon-withdraw</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-call"></use>
                </svg>
                <div class="name">call</div>
                <div class="code-name">#my-icon-call</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-video1"></use>
                </svg>
                <div class="name">video2</div>
                <div class="code-name">#my-icon-video1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-hangup"></use>
                </svg>
                <div class="name">hangup</div>
                <div class="code-name">#my-icon-hangup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-mute"></use>
                </svg>
                <div class="name">mute</div>
                <div class="code-name">#my-icon-mute</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-eye_protection"></use>
                </svg>
                <div class="name">eye_protection</div>
                <div class="code-name">#my-icon-eye_protection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-distance"></use>
                </svg>
                <div class="name">distance</div>
                <div class="code-name">#my-icon-distance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-nickname"></use>
                </svg>
                <div class="name">nickname</div>
                <div class="code-name">#my-icon-nickname</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-payment"></use>
                </svg>
                <div class="name">payment</div>
                <div class="code-name">#my-icon-payment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-privacy_closed"></use>
                </svg>
                <div class="name">privacy_closed</div>
                <div class="code-name">#my-icon-privacy_closed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-movie"></use>
                </svg>
                <div class="name">movie</div>
                <div class="code-name">#my-icon-movie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-wifi"></use>
                </svg>
                <div class="name">wifi</div>
                <div class="code-name">#my-icon-wifi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-problem"></use>
                </svg>
                <div class="name">problem</div>
                <div class="code-name">#my-icon-problem</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-address"></use>
                </svg>
                <div class="name">address</div>
                <div class="code-name">#my-icon-address</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-checkmore"></use>
                </svg>
                <div class="name">check more</div>
                <div class="code-name">#my-icon-checkmore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-bookresource"></use>
                </svg>
                <div class="name">book resource</div>
                <div class="code-name">#my-icon-bookresource</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-checkmore1"></use>
                </svg>
                <div class="name">check more</div>
                <div class="code-name">#my-icon-checkmore1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-addresslist"></use>
                </svg>
                <div class="name">address list</div>
                <div class="code-name">#my-icon-addresslist</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-address1"></use>
                </svg>
                <div class="name">address</div>
                <div class="code-name">#my-icon-address1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-cancelwhite"></use>
                </svg>
                <div class="name">cancel white</div>
                <div class="code-name">#my-icon-cancelwhite</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-cancel1"></use>
                </svg>
                <div class="name">cancel</div>
                <div class="code-name">#my-icon-cancel1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#my-icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-geniecalling"></use>
                </svg>
                <div class="name">genie calling</div>
                <div class="code-name">#my-icon-geniecalling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-entertainmentmark"></use>
                </svg>
                <div class="name">entertainment mark</div>
                <div class="code-name">#my-icon-entertainmentmark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-addmeteo"></use>
                </svg>
                <div class="name">add meteo</div>
                <div class="code-name">#my-icon-addmeteo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-evitaretraffic"></use>
                </svg>
                <div class="name">evitare traffic</div>
                <div class="code-name">#my-icon-evitaretraffic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-evitarepayment"></use>
                </svg>
                <div class="name">evitare payment</div>
                <div class="code-name">#my-icon-evitarepayment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-genieclock"></use>
                </svg>
                <div class="name">genie clock</div>
                <div class="code-name">#my-icon-genieclock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-highwayfirst"></use>
                </svg>
                <div class="name">highway first</div>
                <div class="code-name">#my-icon-highwayfirst</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-faimlyalbum"></use>
                </svg>
                <div class="name">faimly album</div>
                <div class="code-name">#my-icon-faimlyalbum</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-genieSEC"></use>
                </svg>
                <div class="name">genie SEC</div>
                <div class="code-name">#my-icon-genieSEC</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#my-icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-geniecommunity"></use>
                </svg>
                <div class="name">genie community</div>
                <div class="code-name">#my-icon-geniecommunity</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-housecare"></use>
                </svg>
                <div class="name">house care</div>
                <div class="code-name">#my-icon-housecare</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-marks"></use>
                </svg>
                <div class="name">marks</div>
                <div class="code-name">#my-icon-marks</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-infopersonal"></use>
                </svg>
                <div class="name">info personal</div>
                <div class="code-name">#my-icon-infopersonal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-callingrobort"></use>
                </svg>
                <div class="name">calling robort</div>
                <div class="code-name">#my-icon-callingrobort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-masterctrl"></use>
                </svg>
                <div class="name">master ctrl</div>
                <div class="code-name">#my-icon-masterctrl</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-messagewhite"></use>
                </svg>
                <div class="name">message white</div>
                <div class="code-name">#my-icon-messagewhite</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-lightctrl"></use>
                </svg>
                <div class="name">light ctrl</div>
                <div class="code-name">#my-icon-lightctrl</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-mirrorlightctrl"></use>
                </svg>
                <div class="name">mirror light ctrl</div>
                <div class="code-name">#my-icon-mirrorlightctrl</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-kidslock"></use>
                </svg>
                <div class="name">kids lock</div>
                <div class="code-name">#my-icon-kidslock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-evitarehighway"></use>
                </svg>
                <div class="name">evitare highway</div>
                <div class="code-name">#my-icon-evitarehighway</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-groupctrl"></use>
                </svg>
                <div class="name">group ctrl</div>
                <div class="code-name">#my-icon-groupctrl</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-mutemode"></use>
                </svg>
                <div class="name">mute mode</div>
                <div class="code-name">#my-icon-mutemode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-huoyan"></use>
                </svg>
                <div class="name">huoyan</div>
                <div class="code-name">#my-icon-huoyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-paymentlife"></use>
                </svg>
                <div class="name">payment life</div>
                <div class="code-name">#my-icon-paymentlife</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-stepback"></use>
                </svg>
                <div class="name">step back</div>
                <div class="code-name">#my-icon-stepback</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-skintest"></use>
                </svg>
                <div class="name">skin test</div>
                <div class="code-name">#my-icon-skintest</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-scanQR"></use>
                </svg>
                <div class="name">scan QR</div>
                <div class="code-name">#my-icon-scanQR</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-instruction"></use>
                </svg>
                <div class="name">instruction</div>
                <div class="code-name">#my-icon-instruction</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-maskclock"></use>
                </svg>
                <div class="name">mask clock</div>
                <div class="code-name">#my-icon-maskclock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-MTR"></use>
                </svg>
                <div class="name">MTR</div>
                <div class="code-name">#my-icon-MTR</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-suggestion"></use>
                </svg>
                <div class="name">suggestion</div>
                <div class="code-name">#my-icon-suggestion</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-queenmirror"></use>
                </svg>
                <div class="name">queen mirror</div>
                <div class="code-name">#my-icon-queenmirror</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-phonebill"></use>
                </svg>
                <div class="name">phone bill</div>
                <div class="code-name">#my-icon-phonebill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-voicememo"></use>
                </svg>
                <div class="name">voice memo</div>
                <div class="code-name">#my-icon-voicememo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-scanread"></use>
                </svg>
                <div class="name">scan read</div>
                <div class="code-name">#my-icon-scanread</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-schedule"></use>
                </svg>
                <div class="name">schedule</div>
                <div class="code-name">#my-icon-schedule</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-tipsmoney"></use>
                </svg>
                <div class="name">tips money</div>
                <div class="code-name">#my-icon-tipsmoney</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-voiceshopping"></use>
                </svg>
                <div class="name">voice shopping</div>
                <div class="code-name">#my-icon-voiceshopping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-togo"></use>
                </svg>
                <div class="name">to go</div>
                <div class="code-name">#my-icon-togo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-voiceprint"></use>
                </svg>
                <div class="name">voiceprint</div>
                <div class="code-name">#my-icon-voiceprint</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-xiamimusic"></use>
                </svg>
                <div class="name">xiami music</div>
                <div class="code-name">#my-icon-xiamimusic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-sleepmode"></use>
                </svg>
                <div class="name">sleep mode</div>
                <div class="code-name">#my-icon-sleepmode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-QA"></use>
                </svg>
                <div class="name">Q&A</div>
                <div class="code-name">#my-icon-QA</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-volume"></use>
                </svg>
                <div class="name">volume</div>
                <div class="code-name">#my-icon-volume</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-cart"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#my-icon-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-checksurface"></use>
                </svg>
                <div class="name">check surface</div>
                <div class="code-name">#my-icon-checksurface</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#my-icon-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-birthday"></use>
                </svg>
                <div class="name">birthday</div>
                <div class="code-name">#my-icon-birthday</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-deviceoff"></use>
                </svg>
                <div class="name">device off</div>
                <div class="code-name">#my-icon-deviceoff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-custom"></use>
                </svg>
                <div class="name">custom</div>
                <div class="code-name">#my-icon-custom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-diffuserstoparea"></use>
                </svg>
                <div class="name">diffuser stop area</div>
                <div class="code-name">#my-icon-diffuserstoparea</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-diffuserstop"></use>
                </svg>
                <div class="name">diffuser stop</div>
                <div class="code-name">#my-icon-diffuserstop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-diffuserplay"></use>
                </svg>
                <div class="name">diffuser play</div>
                <div class="code-name">#my-icon-diffuserplay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-connectdevice"></use>
                </svg>
                <div class="name">connect device</div>
                <div class="code-name">#my-icon-connectdevice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-cook"></use>
                </svg>
                <div class="name">cook</div>
                <div class="code-name">#my-icon-cook</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-diffuserplayarea"></use>
                </svg>
                <div class="name">diffuser play area</div>
                <div class="code-name">#my-icon-diffuserplayarea</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-deviceon"></use>
                </svg>
                <div class="name">device on</div>
                <div class="code-name">#my-icon-deviceon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-dinner"></use>
                </svg>
                <div class="name">dinner</div>
                <div class="code-name">#my-icon-dinner</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-donework"></use>
                </svg>
                <div class="name">done work</div>
                <div class="code-name">#my-icon-donework</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-getup"></use>
                </svg>
                <div class="name">get up</div>
                <div class="code-name">#my-icon-getup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-disconnectdevice"></use>
                </svg>
                <div class="name">disconnect device</div>
                <div class="code-name">#my-icon-disconnectdevice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-getout"></use>
                </svg>
                <div class="name">get out</div>
                <div class="code-name">#my-icon-getout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-guests"></use>
                </svg>
                <div class="name">guests</div>
                <div class="code-name">#my-icon-guests</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-feeding"></use>
                </svg>
                <div class="name">feeding</div>
                <div class="code-name">#my-icon-feeding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-mark"></use>
                </svg>
                <div class="name">mark</div>
                <div class="code-name">#my-icon-mark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-goodnight"></use>
                </svg>
                <div class="name">good night</div>
                <div class="code-name">#my-icon-goodnight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-meeting"></use>
                </svg>
                <div class="name">meeting</div>
                <div class="code-name">#my-icon-meeting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-housecleaning"></use>
                </svg>
                <div class="name">house cleaning</div>
                <div class="code-name">#my-icon-housecleaning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-gohome"></use>
                </svg>
                <div class="name">go home</div>
                <div class="code-name">#my-icon-gohome</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-hot"></use>
                </svg>
                <div class="name">hot</div>
                <div class="code-name">#my-icon-hot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-radiobuttonunselect"></use>
                </svg>
                <div class="name">radio button unselect</div>
                <div class="code-name">#my-icon-radiobuttonunselect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-menu"></use>
                </svg>
                <div class="name">menu</div>
                <div class="code-name">#my-icon-menu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-radiobuttonselect"></use>
                </svg>
                <div class="name">radio button select</div>
                <div class="code-name">#my-icon-radiobuttonselect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-record"></use>
                </svg>
                <div class="name">record</div>
                <div class="code-name">#my-icon-record</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-meetingover"></use>
                </svg>
                <div class="name">meeting over</div>
                <div class="code-name">#my-icon-meetingover</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-microphoneoff"></use>
                </svg>
                <div class="name">microphone off</div>
                <div class="code-name">#my-icon-microphoneoff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#my-icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-seriesfinale"></use>
                </svg>
                <div class="name">series finale</div>
                <div class="code-name">#my-icon-seriesfinale</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-putbabytobed"></use>
                </svg>
                <div class="name">put baby to bed</div>
                <div class="code-name">#my-icon-putbabytobed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-washingroom"></use>
                </svg>
                <div class="name">washing room</div>
                <div class="code-name">#my-icon-washingroom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-wakeupbaby"></use>
                </svg>
                <div class="name">wake up baby</div>
                <div class="code-name">#my-icon-wakeupbaby</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-watchseries"></use>
                </svg>
                <div class="name">watch series</div>
                <div class="code-name">#my-icon-watchseries</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-takeabreak"></use>
                </svg>
                <div class="name">take a break</div>
                <div class="code-name">#my-icon-takeabreak</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-bluetoothoff"></use>
                </svg>
                <div class="name">bluetooth off</div>
                <div class="code-name">#my-icon-bluetoothoff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-bluetoothon"></use>
                </svg>
                <div class="name">bluetoothon</div>
                <div class="code-name">#my-icon-bluetoothon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#my-icon-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-course"></use>
                </svg>
                <div class="name">course</div>
                <div class="code-name">#my-icon-course</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-bluetooth_link"></use>
                </svg>
                <div class="name">bluetooth_link</div>
                <div class="code-name">#my-icon-bluetooth_link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-addto"></use>
                </svg>
                <div class="name">addto</div>
                <div class="code-name">#my-icon-addto</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-child"></use>
                </svg>
                <div class="name">child</div>
                <div class="code-name">#my-icon-child</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-audio"></use>
                </svg>
                <div class="name">audio</div>
                <div class="code-name">#my-icon-audio</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#my-icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-DND_mode"></use>
                </svg>
                <div class="name">DND_mode</div>
                <div class="code-name">#my-icon-DND_mode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#my-icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-child1"></use>
                </svg>
                <div class="name">child2</div>
                <div class="code-name">#my-icon-child1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-settings"></use>
                </svg>
                <div class="name">settings</div>
                <div class="code-name">#my-icon-settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-bluray"></use>
                </svg>
                <div class="name">bluray</div>
                <div class="code-name">#my-icon-bluray</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-cancel"></use>
                </svg>
                <div class="name">cancel</div>
                <div class="code-name">#my-icon-cancel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#my-icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-brightness"></use>
                </svg>
                <div class="name">brightness</div>
                <div class="code-name">#my-icon-brightness</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#my-icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-favoriteslist"></use>
                </svg>
                <div class="name">favoriteslist</div>
                <div class="code-name">#my-icon-favoriteslist</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-bottom"></use>
                </svg>
                <div class="name">bottom</div>
                <div class="code-name">#my-icon-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-guarantee"></use>
                </svg>
                <div class="name">guarantee</div>
                <div class="code-name">#my-icon-guarantee</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-agreement"></use>
                </svg>
                <div class="name">agreement</div>
                <div class="code-name">#my-icon-agreement</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-prevent"></use>
                </svg>
                <div class="name">prevent</div>
                <div class="code-name">#my-icon-prevent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-privacy"></use>
                </svg>
                <div class="name">privacy2</div>
                <div class="code-name">#my-icon-privacy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-brightness1"></use>
                </svg>
                <div class="name">brightness2</div>
                <div class="code-name">#my-icon-brightness1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-privac_open"></use>
                </svg>
                <div class="name">privac_open</div>
                <div class="code-name">#my-icon-privac_open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-conversation"></use>
                </svg>
                <div class="name">conversation</div>
                <div class="code-name">#my-icon-conversation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-information"></use>
                </svg>
                <div class="name">information</div>
                <div class="code-name">#my-icon-information</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-answer"></use>
                </svg>
                <div class="name">answer</div>
                <div class="code-name">#my-icon-answer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-face"></use>
                </svg>
                <div class="name">face</div>
                <div class="code-name">#my-icon-face</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-protect"></use>
                </svg>
                <div class="name">protect</div>
                <div class="code-name">#my-icon-protect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-close1"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#my-icon-close1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-nosignal"></use>
                </svg>
                <div class="name">nosignal</div>
                <div class="code-name">#my-icon-nosignal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-singlecycle"></use>
                </svg>
                <div class="name">singlecycle</div>
                <div class="code-name">#my-icon-singlecycle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-random"></use>
                </svg>
                <div class="name">random</div>
                <div class="code-name">#my-icon-random</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-singing"></use>
                </svg>
                <div class="name">singing</div>
                <div class="code-name">#my-icon-singing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-cibiaoquanyi"></use>
                </svg>
                <div class="name">词表权益</div>
                <div class="code-name">#my-icon-cibiaoquanyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-musiclist"></use>
                </svg>
                <div class="name">musiclist</div>
                <div class="code-name">#my-icon-musiclist</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-timeout"></use>
                </svg>
                <div class="name">timeout</div>
                <div class="code-name">#my-icon-timeout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-message"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#my-icon-message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-respond"></use>
                </svg>
                <div class="name">respond</div>
                <div class="code-name">#my-icon-respond</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-loop"></use>
                </svg>
                <div class="name">loop</div>
                <div class="code-name">#my-icon-loop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-nextsong"></use>
                </svg>
                <div class="name">nextsong</div>
                <div class="code-name">#my-icon-nextsong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-play"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#my-icon-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-previous"></use>
                </svg>
                <div class="name">previous</div>
                <div class="code-name">#my-icon-previous</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-next"></use>
                </svg>
                <div class="name">next</div>
                <div class="code-name">#my-icon-next</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-voice"></use>
                </svg>
                <div class="name">voice</div>
                <div class="code-name">#my-icon-voice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-back"></use>
                </svg>
                <div class="name">back</div>
                <div class="code-name">#my-icon-back</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#my-icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#my-icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-dislike"></use>
                </svg>
                <div class="name">dislike</div>
                <div class="code-name">#my-icon-dislike</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#my-icon-like</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#my-icon-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#my-icon-setting</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
